<template>
  <div class="message">
    <h3>消息</h3> 
    <input v-model="value" class="search" placeholder="搜索聊天记录/联系人/服务号"/>
    <cell title="通知消息" icon="https://s1.328888.xyz/2022/10/13/8UqHk.png" label="还没有新通知~"/>
    <cell title="互动消息" icon="https://s1.328888.xyz/2022/10/13/8UYFE.png" label="还没有新互动消息~"/>
    <empty
  image="https://s1.328888.xyz/2022/10/09/gNY5o.png"
  image-size="17rem"
  description="Emm...好像没人找你聊天"
/>
  </div>
</template>
<script setup>
import { ref } from "vue";
import { Search ,Empty,Cell } from 'vant';
const value = ref('');
</script>
<style scoped>
h3{
  text-align: center;
  color: #333333;
  font-weight: 600;
}

.search{
  display: block;
  margin: 0 auto;
  padding: .5rem;
  width: 90vw;
  box-sizing: border-box;
  background-color: #F5F5F5 ;
  outline: none;
  border: none;
  border-radius: 1rem;
  font-size: 1rem;
  margin: 1rem;
}

</style>